<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
  <meta charset="UTF-8">
  <title>^^title-订单管理</title>

  <link rel="stylesheet" href="^^static_url/css/vendor.css">
  <link rel="stylesheet" href="^^static_url/css/1m2.css">
  <link href="https://cdn.bootcss.com/element-ui/2.2.1/theme-chalk/index.css" rel="stylesheet">
  <style>
    * {
      list-style: none;
    }

    #order-route-list {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      width: 100%;
    }

    #order-route-list li {
      text-align: center;
      width: 100%;
    }

    #order-route-list .edit-status {
      color: orangered;
    }

    #order-route-list .edit-step {
      width: 20px;
      height: 20px;
      background: green;
      border-radius: 99%;
      margin: 10px auto;
      line-height: 40px;
      color: #fff;
    }

    .edit-title > p {
      font-size: 20px;
      box-sizing: border-box;
      /*border-left: 5px solid blue;*/
      padding-left: 5px;
      padding-bottom: 8px;
      border-bottom: 2px solid blue;
    }

    .edit-title > p > span {
      border-left: 5px solid blue;
      padding-left: 8px;
    }

    #order-info ul {
      margin-top: 50px;
    }

    #order-info ul li {
      margin: 15px;
    }

    #order-info ul li span {
      display: inline-block;
    }

    #order-info ul li .title {
      width: 30%;
      text-align: right;
      margin-right: 12px;
    }

    #order-info ul li span:last-child {
      font-weight: 500;
    }

    #order-route > p {
      margin-bottom: 150px;
    }

    * {
      list-style: none;
      box-sizing: border-box;
    }

    .order-route-list > li {
      width: 50%;
      position: relative;
    }

    .order-route-list {
      padding: 0;
      display: flex;
      /*width: 500px;*/
      /*height: 500px;*/
      justify-content: space-around;
      /*background: yellow;*/
    }

    .order-route-list > li:before {
      content: '';
      width: 30px;
      height: 30px;
      color: #bbb;
      background: #bbb;
      display: block;
      border-radius: 100%;
      position: absolute;
      left: calc(50% - 15px);
      z-index: 1;
    }

    .order-route-list > .active:before {
      background: #4caf50;
    }

    .start:after {
      content: '';
      width: 50%;
      background: #bbb;
      position: absolute;
      left: 50%;
      color: #fff;
      height: 10px;
      top: 10px;
      /* z-index: -1; */
    }

    .order-route-list li .status {
      position: absolute;
      left: calc(50% - 15px);
      top: 3%
    }

    .order-route-list li .time {
      position: relative;
      width: 100%;
      top: 76px;
      text-align: center;
    }

    .in-side:after {
      content: '';
      width: 100%;
      background: #bbb;
      position: absolute;
      left: 0%;
      color: #fff;
      height: 10px;
      top: 10px;
    }

    .end:after {
      content: '';
      width: 50%;
      background: #bbb;
      position: absolute;
      left: 0%;
      color: #fff;
      height: 10px;
      top: 10px;
    }

    .active:after {
      background: #4caf50;
    }

    .status-title {
      position: absolute;
      top: 45px;
      width: 100%;
      text-align: center;
    }

    .status-info {
      width: 100%;
      position: absolute;
      top: -20px;
      left: 93%;
    }

    .active .status-title {
      color: red;
    }

  </style>
</head>
<body>
@@include('header.html')
@@include('menu.html')

<div class="content-wrap">
  <div id="app">
    <div id="order-info" class="edit-title">
      <p><span>订单详情</span></p>
      <ul v-if="orderDetail">
        <li>
          <span class="title">订单号:</span>
          <span id="order-id">{{orderDetail.orderId}}</span>
        </li>
        <li>
          <span class="title">开发商:</span>
          <span id="devName">{{orderDetail.devName}}</span>
        </li>
        <li>
          <span class="title">楼盘名称:</span>
          <span id="buildName">{{orderDetail.buildName}}</span>
        </li>
        <li>
          <span class="title">房源:</span>
          <span id="roomName">{{orderDetail.roomName}}</span>
        </li>
        <li>
          <span class="title">定金金额:</span>
          <span id="tradeAmount">{{orderDetail.tradeAmount}}</span>
        </li>
        <li>
          <span class="title">姓名:</span>
          <span id="realName">{{orderDetail.realName}}</span>
        </li>
        <li>
          <span class="title">手机号码:</span>
          <span id="phone">{{orderDetail.phone}}</span>
        </li>
        <li>
          <span class="title">身份证号:</span>
          <span id="idCardNo">{{orderDetail.idCardNo}}</span>
        </li>
        <li>
          <span class="title">楼栋:</span>
          <span id="backup2">{{orderDetail.backup2}}</span>
        </li>
      </ul>
    </div>
    <div id="order-route" class="edit-title">
      <p><span>订单轨迹</span></p>
      <ul class="order-route-list"></ul>
    </div>
  </div>
</div>

@@include('footer.html')
</body>
<script src="^^static_url/js/vendor.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.2.1/index.js"></script>
<script src="^^static_url/js/houseOrder_detail.js"></script>
</html>